/**
* 、单词跟读练习页面
*/
<template>
	<view class="practice" :style="{height:itemHeight}">
		<image src="/static/practice.jpg" mode="widthFix" class="image"></image>
		<view class="info">
			<view class="center">
				<text>{{item.label}}</text>
			</view>
			<view class="footer">
				<view class="row">
					<text class="text">标准</text>
					<text class="iconfont full icon-bofang" @click="bzuPlay"></text>
				</view>
				<view class="row">
					<text class="text">我的</text>
					<text class="iconfont icon-bofang" @click="wodPlay"></text>
				</view>
			</view>
		</view>
		<view class="luy">
			<view @longtap="longtap" @touchend="touchend" @touchcancel="touchcancel">
				<view v-if="luyinStatus" class="iconfont icon-ic_settings_voice_px"></view>
				<view v-else class="iconfont icon-luyin"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	// 引入小程序的生命周期函数
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		toast
	} from 'luoyu-uni-utils';
	import {
		speechToText
	} from '@/api/luoyu';
	
	const emit = defineEmits(['status'])

	const props = defineProps({
		itemHeight: {
			type: String,
			default: '100%'
		},
		// 每一个item
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	//点击录音状态
	const luyinStatus = ref(false)
	//创建录音管理器
	const recorderManager = uni.getRecorderManager()
	//录音的地址
	const recorderFilePath = ref('')
	//这个状态拿来判断是否跟读成功 true跟读成功 false跟读失败 在跟读结束的时候就调用一次
	const statusFlag = ref(false)


	//点击长按500豪秒之后开始触发的事件
	function longtap() {
		// 获取当前时间戳（单位：毫秒）
		const startTimestamp = Date.now();
		luyinStatus.value = true
		//开始录音
		recorderManager.start({
			//设置录音管理器自带的参数
			duration: 10000, //指定最长的录音时间 单位毫秒
			format: "mp3", //音频格式
			hideTips: true //隐藏录音图标
		})
		//录音停止之后执行的函数
		recorderManager.onStop((res) => {
			statusFlag.value = false
			//获取录音完成之后的临时地址
			recorderFilePath.value = res.tempFilePath
			// 获取事件执行后的时间戳
			  const endTimestamp = Date.now();
			  // 计算时间差（单位：秒）
			  const timeDifference = (endTimestamp - startTimestamp) / 1000;
			  // 判断时间差是否大于 2 秒
			  if (timeDifference > 2) {
				  emit('status',{statusFlag:true,item:props.item})
				  //大于2秒数之后就执行一次
				  //先匹配自己读的
			    speechToText(recorderFilePath.value).then(async (res1) =>{
					// console.log(res1,'res1');
					if(res1.code == 200 && res1.data.text != '') {
						//匹配成功返回读音内容  
						const wordTetx = res1.data.text
						//然后匹配标准的读音
						const res2 =  await speechToText(props.item.value)
						// console.log(res2);
						if(res2.code == 200 && res2.data.text != '') {
							const bzText = res2.data.text
							if(bzText.indexOf(wordTetx) != -1) {
								statusFlag.value = true
								emit('status',{statusFlag:statusFlag.value,item:props.item})
							}else {
								emit('status',{statusFlag:statusFlag.value,item:props.item})
							}
						}else {
							emit('status',{statusFlag:statusFlag.value,item:props.item})
						}
					}else {
						emit('status',{statusFlag:statusFlag.value,item:props.item})
					}
					
				}).catch((error) =>{
					statusFlag.value = false
					emit('status',{statusFlag:statusFlag.value,item:props.item})
				})
			  } else {
			    console.log('事件执行时间未超过 2 秒');
			  }
			
		})
	}
	//再次点击之后 结束录音
	function touchend() {
		console.log('结束');
		//录音状态为false
		luyinStatus.value = false
		//点击结束之后就停止录音，录音管理器调用内置stop()方法
		recorderManager.stop()
	}
	//手指触摸动作被打断，如来电提醒，弹窗
	function touchcancel() {
		luyinStatus.value = false
		//点击结束之后就停止录音，录音管理器调用内置stop()方法
		recorderManager.stop()
	}

	//播放标准的音频文件
	function bzuPlay() {
		//创建音频播放器 使用uniapp内置对象创建音频播放器
		const innerAudioContext = uni.createInnerAudioContext()
		//设置开始播放
		innerAudioContext.autoplay = true
		//设置音频播放的路径
		// innerAudioContext.src = "/static/base.mp3"
		innerAudioContext.src = props.item.value
		//播放的监听事件
		innerAudioContext.onPlay(() => {
			console.log('开始播放了');
		})
	}

	//播放我录音的单词文件
	function wodPlay() {
		//判断录音的临时地址是否不为空
		if (recorderFilePath.value) {
			//创建音频播放器
			const innerAudioContext = uni.createInnerAudioContext()
			//设置自动开始播放
			innerAudioContext.autoplay = true
			//设置音频播放的路径 把我们获取到的路由临时地址赋值给录音播放器
			innerAudioContext.src = recorderFilePath.value
			//播放的监听事件
			innerAudioContext.onPlay(() => {
				console.log('开始播放了');
			})
			//暂时识别用户录音单词
			submit()

		} else {
			//用户未录音，提示用户
			toast("暂未录音")
		}

	}


	async function submit() {
		
	}
	//页面初始化完成时调用	
	onLoad(() => {

	})
</script>

<style scoped lang="scss">
	.practice {
		position: relative;
		height: 100%;

		.image {
			width: 750rpx;
			height: 300rpx;
		}

		.info {
			width: 750rpx;
			height: 300rpx;
			background-color: #fff;
			position: relative;

			.center {
				padding-top: 130rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 48rpx;
					font-weight: 600;
					color: #000;
				}
			}

			.footer {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;

				.row {
					display: flex;
					align-items: center;

					.text {
						font-size: 28rpx;
						font-weight: 600;
						margin-right: 20rpx;
					}

					.full {
						font-weight: 600;
						color: #000;
					}

					.iconfont {
						font-size: 28px;
					}
				}

			}
		}

		.luy {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 100rpx;

			.iconfont {
				font-size: 68rpx;
			}

			.icon-ic_settings_voice_px {
				font-size: 78rpx;
			}

		}
	}
</style>